<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作日志管理系统</title>
    <!--引入的vue.js-->
    <script src="../../js/vue.js"></script>
    <!--引入elementUI的css-->
    <link type="text/css" rel="stylesheet" href="../../css/index.css">
    <!--引入elementUI的js-->
    <script src="../../js/index.js"></script>
    <!--引入axios.js-->
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/echarts.js"></script>
    <style>
        .container {
            padding: 20px;
        }
        .search-form {
            margin-bottom: 20px;
            padding: 20px;
            background: #f5f7fa;
            border-radius: 4px;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
        .status-success {
            color: #67c23a;
        }
        .status-error {
            color: #f56c6c;
        }
        .el-table .expand-row {
            line-height: 25px;
            padding: 10px;
            background-color: #f9f9f9;
        }
        .expand-label {
            width: 90px;
            color: #99a9bf;
            font-weight: bold;
        }
        .expand-value {
            word-break: break-all;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>操作日志查询</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="refreshData">刷新</el-button>
            </div>
            <!--搜索区域-->
            <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
                <el-form-item label="模块标题" prop="title">
                    <el-input v-model="queryParams.data.title" placeholder="请输入模块标题" clearable></el-input>
                </el-form-item>
                <el-form-item label="操作人员" prop="operName">
                    <el-input v-model="queryParams.data.operName" placeholder="请输入操作人员" clearable></el-input>
                </el-form-item>
                <el-form-item label="业务类型" prop="businessType">
                    <el-select v-model="queryParams.data.businessType" placeholder="请选择业务类型" clearable>
                        <el-option label="其它" :value="0"></el-option>
                        <el-option label="新增" :value="1"></el-option>
                        <el-option label="修改" :value="2"></el-option>
                        <el-option label="删除" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="操作状态" prop="status">
                    <el-select v-model="queryParams.data.status" placeholder="请选择操作状态" clearable>
                        <el-option label="正常" :value="0"></el-option>
                        <el-option label="异常" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery" icon="el-icon-search">搜索</el-button>
                    <el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
            <!--操作日志列表-->
            <el-table :data="logList" border stripe v-loading="loading">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div class="expand-row">
                            <p><span class="expand-label">请求URL:</span> <span class="expand-value">{{ props.row.operUrl }}</span></p>
                            <p><span class="expand-label">请求参数:</span> <span class="expand-value">{{ props.row.operParam }}</span></p>
                            <p><span class="expand-label">返回参数:</span> <span class="expand-value">{{ props.row.jsonResult }}</span></p>
                            <p><span class="expand-label">错误消息:</span> <span class="expand-value">{{ props.row.errorMsg || '无' }}</span></p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="operId" label="日志ID" width="80" align="center"></el-table-column>
                <el-table-column prop="title" label="模块标题" width="120" align="center"></el-table-column>
                <el-table-column prop="businessType" label="业务类型" width="100" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.businessType === 0">其它</span>
                        <span v-else-if="scope.row.businessType === 1">新增</span>
                        <span v-else-if="scope.row.businessType === 2">修改</span>
                        <span v-else-if="scope.row.businessType === 3">删除</span>
                    </template>
                </el-table-column>
                <el-table-column prop="method" label="方法名称" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="requestMethod" label="请求方式" width="100" align="center"></el-table-column>
                <el-table-column prop="operatorType" label="操作类别" width="120" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.operatorType === 0">其它</span>
                        <span v-else-if="scope.row.operatorType === 1">后台用户</span>
                        <span v-else-if="scope.row.operatorType === 2">手机端用户</span>
                    </template>
                </el-table-column>
                <el-table-column prop="operName" label="操作人员" width="120" align="center"></el-table-column>
                <el-table-column prop="deptName" label="部门名称" width="120"></el-table-column>
                <el-table-column prop="operIp" label="主机地址" width="140"></el-table-column>
                <el-table-column prop="operLocation" label="操作地点" width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="操作状态" width="100" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'" size="small">
                            {{ scope.row.status === 0 ? '正常' : '异常' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="operTime" label="操作时间" width="160" align="center">
                    <template slot-scope="scope">
                        {{ formatTime(scope.row.operTime) }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.pageNo"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>

    <el-date-picker
            v-model="yearMonth"
            type="month"
            @change="yearMonthChange"
            placeholder="选择月">
    </el-date-picker>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                // 查询参数
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    data: {
                        title: '',
                        operName: '',
                        businessType: null,
                        status: null
                    }
                },
                // 日志列表
                logList: [],
                // 总条数
                total: 0,
                // 加载状态
                loading: false,
                yearMonth:'',
                monthDay:[],
                addCount:[],
                updateCount:[],
                deleteCount:[]
            };
        },
        created() {
            this.getList();
        },
        mounted:function (){//初始化
            //动态获取当前年月
            let currentDate = new Date();
            //初始化
            let year =  currentDate.getFullYear(); ///获取4位年
            //let year  =  currentDate.getYear(); //获取2位年
            let month  =  currentDate.getMonth()+1; //获取月 获取到月份是0-11 实际使用+1
            this.yearMonth = year+"-"+(month<10?"0"+month:month);
            //alert(this.yearMonth)
            this.loadData();

        },
        methods: {
            // 获取日志列表
            async getList() {
                this.loading = true;
                try {
                    // 调用查询操作日志接口
                    const response = await axios.post('/vegetablemarketexpress/operateLog/selectOperLogList', this.queryParams);
                    if (response.data && response.data.code === 200) {
                        this.logList = response.data.data.list || [];
                        this.total = response.data.data.total || 0;
                    } else {
                        this.$message.error(response.data.msg || '获取数据失败');
                    }
                } catch (error) {
                    console.error('获取日志列表失败:', error);
                    this.$message.error('获取数据失败: ' + (error.response?.data?.message || error.message));
                } finally {
                    this.loading = false;
                }
            },

            // 处理查询
            handleQuery() {
                this.queryParams.pageNo = 1;
                this.getList();
            },

            // 重置查询
            resetQuery() {
                this.queryParams.data = {
                    title: '',
                    operName: '',
                    businessType: null,
                    status: null
                };
                this.queryParams.pageNo = 1;
                this.getList();
            },

            // 处理分页大小变化
            handleSizeChange(val) {
                this.queryParams.pageSize = val;
                this.queryParams.pageNo = 1;
                this.getList();
            },

            // 处理当前页变化
            handleCurrentChange(val) {
                this.queryParams.pageNo = val;
                this.getList();
            },

            // 格式化时间
            formatTime(time) {
                if (!time) return '';
                const date = new Date(time);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },

            // 刷新数据
            refreshData() {
                this.getList();
                this.$message.success('数据已刷新');
            },
            //加载数据
            loadData(){
                //定义 this是vue对象
                let _this = this;
                axios.get('/vegetablemarketexpress/operateLog/queryEchartsDataByYearMonth?yearMonth='+this.yearMonth)
                    .then(function (response) {
                        //判断返回状态
                        if(response.data.code==200){
                            _this.monthDay=[];
                            _this.addCount=[];
                            _this.updateCount=[];
                            _this.deleteCount=[];
                            let data  = response.data.data;
                            for (let i = 0; i < data.length; i++) {
                                const item = data[i];
                                //把每个中值放入数组中
                                _this.monthDay.push(item.monthDay);
                                _this.addCount.push(item.addCount);
                                _this.updateCount.push(item.updateCount);
                                _this.deleteCount.push(item.deleteCount);
                            }
                            //展示echarts
                            _this.showEcharts();
                        }
                    })
            },
            //年月改变时触发
            yearMonthChange(v){
                //v不是选择后出现在输入框的值，所以要自己拼装查询的参数
                let year =  v.getFullYear();
                let month  = v.getMonth()+1;
                this.yearMonth = year+"-"+(month<10?"0"+month:month);
                //alert(this.yearMonth);
                this.loadData();
            },
            //展示echarts
            showEcharts(){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '每月操作日志统计图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {data:['添加数量','修改数量','删除数量']},
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: { readOnly: false },
                            magicType: { type: ['line', 'bar'] },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monthDay
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    },
                    series: [
                        {
                            name: '添加数量',
                            type: 'line',
                            data: this.addCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大' },
                                    { type: 'min', name: '最小' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: '平均值' }]
                            }
                        },
                        {
                            name: '修改数量',
                            type: 'line',
                            data: this.updateCount,
                            markPoint: {
                                data: [
                                    { type: 'max', name: '最大' },
                                    { type: 'min', name: '最小' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: '平均值' }]
                            }
                        },
                        {
                            name: '删除数量',
                            type: 'line',
                            data: this.deleteCount,
                            markPoint: {
                                data: [{ name: '最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                            },
                            markLine: {
                                data: [
                                    { type: 'average', name: 'Avg' },
                                    [
                                        {
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        },
                                        {
                                            symbol: 'circle',
                                            label: {
                                                position: 'start',
                                                formatter: 'Max'
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    });
</script>
</body>
</html>